<script setup lang="ts">
import JinHintModal from "@/components/framework/jin-hint-modal/jin-hint-modal.vue";
import useSettingStore from "@/stores/modules/useSettingStore.ts";
import { onMounted } from "vue";
import { getToken, getUser, hexToRgb, isWhiteHex } from "@/utils";
import { getShow } from "@/services/setting.ts";
import useLoadingStore from "@/stores/modules/useLoadingStore.ts";

const { getLoading } = useLoadingStore()

const { getPageIsCompact } = useSettingStore();

onMounted(() => {
  // const run = process.env.run as strin

  if (getToken()) {
    const user = getUser();
    if (user.id) {
      getShow(user.id).then((res) => {
        if (res.code === 200) {
          if (res.data) {
            document.body.style.setProperty(
                "--primary-6",
                hexToRgb(res.data.sysColor)
            );
            document.body.style.setProperty(
                "--primary-5",
                hexToRgb(res.data.sysColor)
            );
            document.body.style.setProperty(
                "--primary-7",
                hexToRgb(res.data.sysColor)
            );

            // 分页
            document
                .querySelectorAll(".arco-pagination-item-active")
                .forEach((item) => {
                  item.style.backgroundColor = res.data.sysColor;
                  item.style.color = isWhiteHex(hexToRgb(res.data.sysColor))
                      ? "#000"
                      : "#fff";
                });

            // 灰色模式
            if (res.data.enableGray) {
              document.body.style.setProperty("filter", "grayscale(1)");
            } else {
              document.body.style.removeProperty("filter");
            }
          }
        }
      });
    }
  }
});
</script>

<template>
  <!-- 提示对话框 -->
  <div class="default">
    <jin-hint-modal />
    <a-config-provider :size="getPageIsCompact()">
      <a-spin class="layoutSpin" :loading="getLoading()" dot tip="数据加载中请稍后。。。">
        <router-view></router-view>
      </a-spin>
    </a-config-provider>
  </div>

</template>

<style lang="scss" scoped>
:deep(.arco-spin) {
  &.layoutSpin {
    width: 100vw;
  }
}
</style>
